<template>
    <div>
      <van-nav-bar
        :title="'城市-' + cityName"
        left-text="X"
        fixed
        z-index="99"
        @click-left="goBack"
      >
        <template #left>
          <van-icon name="cross" size="20" color="#191a1b" />
        </template>
      </van-nav-bar>

      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        background="#f4f4f4"
        class="search"
        @input="changeSearch"
      >
        <template #action>
          <div @click="onCancel" v-show="showBtn">取消</div>
        </template>
      </van-search>
      <div class="city-list">
        <div v-show="showAll">
          <div class="city-title">
            <div class="city-index-title">GPS定位你所在城市</div>
            <van-tag color="#f4f4f4" text-color="#191a1b" size="large"
              >定位失败</van-tag
            >
            <div class="city-index-title">热门城市</div>
            <van-tag
              v-for="city in hotCitys"
              :key="city.id"
              color="#f4f4f4"
              text-color="#191a1b"
              class="hot-city"
              size="large"
              @click="selectCity(city)"
            >
              {{ city.name }}</van-tag
            >
          </div>
          <van-index-bar :index-list="codeList" :sticky-offset-top="100"  highlight-color="#FF5F16">
            <div v-for="code in codeList" :key="code">
              <van-index-anchor :index="code" class="city-code">{{ code }}</van-index-anchor>
              <van-cell
                :title="city.name"
                v-for="city in filterCities(code)"
                :key="city.id"
                @click="selectCity(city)"
              />
            </div>
          </van-index-bar>
        </div>
        <div v-show="!showAll">
          <van-cell
            :title="city.name"
            v-for="city in showCities"
            :key="city.id"
            @click="selectCity(city)"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import{mapState} from 'vuex'
  export default {
    data() {
      return {
        searchText: "",
        showBtn: false,
        showAll: true, 
        cities: [],
        count: 0
      };
    },
    created() {
      this.gitCities();
    },
    computed: {
      ...mapState(['cityName']),
      hotCitys() {
        return this.cities.filter((item) => item.isHot);
      },
      codeList() {
        let codeList = [];
        this.cities.forEach((cityObj) => {
          let code = cityObj.pinyin.charAt(0).toUpperCase();
          if (!codeList.includes(code)) {
            codeList.push(code);
          }
        });
        return codeList.sort();
      },
      showCities() {
        return this.searchText
          ? this.cities.filter(
              (item) =>
                item.pinyin.includes(this.searchText) ||
                item.name.includes(this.searchText)
            )
          : [];
      },
    },
    methods: {
      selectCity(city){
        let cityObj ={
          name: city.name,
          id:city.cityId
        }
        this.$store.commit('changeCity', cityObj)
        this.$router.push("/");
  
      },
      onCancel() {
        if (this.showAll) {
          this.showBtn = false;
        } else {
          this.showAll = true;
        }
      },
      changeSearch() {
        this.showAll = false;
        this.showBtn = true;
      },
      goBack(){
            this.$router.go(-1)
        },
      filterCities(code) {
        return this.cities.filter(
          (cityObj) => cityObj.pinyin.charAt(0).toUpperCase() === code
        );
      },
      async gitCities() {
        let res = await this.$api({
          headers: {
            "X-Host": "mall.film-ticket.city.list",
          },
          url: "https://m.maizuo.com/gateway",
          method: "get",
          params: {
            k: 673981,
          },
        });
        this.cities = res.data.data.cities;
      },
    },
  };
  </script>
  
  <style scoped>
  .van-search__content {
    background-color: #fff;
  }
  .search {
    position: fixed;
    top: 46px;
    width: 100%;
    z-index: 99;
  }
  .city-list {
    padding: 100px 10px 50px 10px;
  }
  .city-title {
    background: #fff;
  }
  .city-index-title {
    font-size: 16px;
    color: #797d82;
    margin-bottom: 10px;
  }
  .hot-city {
    margin: 5px;
  }
  .city-code {
    background-color: #f4f4f4;
    color: #797d82;
    padding: 0 0 0 15px;
    height: 30px;
    line-height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  </style>
  